<template>
    <div class="tabs">
        <div 
        @click="$event=>tabClick(item)"
        class="item" 
        :class="{'active-item':item.value==activeName}" 
        v-for="(item,index) in tabs"> 
            {{ item.title }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
//定义路由进行页面跳转
import { useRouter } from "vue-router";

const router = useRouter()
const activeName = ref ('home')

const tabs=ref([
    {
        title: "首页",
        value: "home",
    },
    {
        title: "校园社团",
        value: "club-list",
    },
    {
        title: "社团活动",
        value: "activity-list",
    },
]);
const tabClick=(item:any)=>{
    activeName.value = item.value
    router.push({name:item.value})
}
</script>

<style scoped lang="scss">
.tabs{
    display: flex;
    flex-grow: 1;
    font-weight: 600;
    margin-left: 50px;
    .item{
        padding: 0px 30px;
        //文字居中显示
        text-align: center;
        color: #fff;
        //控制字体未点击前的字体大小
        font-size: 16px;
        //将鼠标图案变成手型图案
        cursor: pointer;
        height: 60px;
        line-height: 60px
    }
    .active-item{
        padding: 0px 30px;
        //文字居中显示
        text-align: center;
        color: #F3AF28;
        font-size: 18px;
        cursor: pointer;
        height: 60px;
        line-height: 60px;
        border-bottom: 2px solid #f3af28;
    }
}
</style>